<template>
    <div id="app">
        <!-- Cesium 容器挂载 -->
        <div ref="viewerContainer" id="cesiumContainer"></div>
        <!-- 路由视图 -->
        <router-view />
    </div>
</template>

<script setup lang="ts">
import { initMap } from '@/utils/InitMap';
const viewerContainer = ref<HTMLDivElement | null>(null);

onMounted(() => {
    //将__viewer视角挂载到window全局，方便其他页面使用并调试；
    const viewer = initMap(viewerContainer.value);
    window.__viewer = viewer;

    // 显示帧率
    //  window.__viewer.scene.debugShowFramesPerSecond = true;

    // flyTo({
    //   viewer: window.__viewer, duration: 3, location: [121.1571944, 31.2207278,0], orientation: {
    //     heading: 5.8371,
    //     pitch: -0.3606,
    //     roll: 0.0,
    //   }
    // })

    // 辅助开发 获取相机信息
    // const container = document.getElementById('scroll-container');
    // if (container) {
    //     container.addEventListener(
    //         'wheel',
    //         () => {
    //             console.log('wheel scrolled');
    //         },
    //         { passive: true }
    //     ); // ✅ 加上 passive
    // }
});
</script>

<style lang="scss">
#app {
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

#cesiumContainer {
    position: fixed; /* 固定定位，全屏 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
</style>
